/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import OrderPage from './order';
import TutorialsPage from './tutorials';
import { createStaticNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { StackRouteList } from './types/routes';
import { Text } from '@react-navigation/elements';
import BottomTabs from './home';
import { createDrawerNavigator } from '@react-navigation/drawer';
import DrawerContent from './drawer-content';
import SettingsPage from './settings';
import YouthModePage from './youth-mode';
import CustomerServicePage from './customer-service';
import ReanimatedHelloWorldPage from './demo/reanimated/hello-world';
import ReanimatedAnimatingStylesPage from './demo/reanimated/animating-styles';
import ReanimatedAnimatingPropsPage from './demo/reanimated/animating-props';

const RootStack = createNativeStackNavigator<StackRouteList>({
  initialRouteName: "/home",
  screenOptions: {
    headerStyle: { backgroundColor: "orange" }
  },
  screens: {
    "/home": {
      screen: BottomTabs,
      options: { headerShown: false, },
    },
    "/customer-service": {
      screen: CustomerServicePage,
      options: { title: "Customer Service", },
    },
    "/demo/reanimated-hello-world": {
      screen: ReanimatedHelloWorldPage,
      options: { title: "Demo Reanimated - Hello World", },
    },
    "/demo/reanimated-animating-props": {
      screen: ReanimatedAnimatingPropsPage,
      options: { title: "Demo Reanimated - Animating Props", },
    },
    "/demo/reanimated-animating-styles": {
      screen: ReanimatedAnimatingStylesPage,
      options: { title: "Demo Reanimated - Animating Styles", },
    },
    "/orders": {
      screen: OrderPage,
      options: ({ route }) => ({
        title: `💴 Order ${route.params?.orderId}`,
        headerStyle: { backgroundColor: "indigo" },
        headerTintColor: "white",
        headerTitleStyle: { fontWeight: "bold", fontSize: 16 },
        headerRight: () => (<Text>📞</Text>)
      }),
    },
    "/tutorials": {
      screen: TutorialsPage,
      options: { title: "Tutorials", },
    },
    "/settings": {
      screen: SettingsPage,
      options: { title: "Settings", },
    },
    "/youth-mode": {
      screen: YouthModePage,
      options: { title: "Youth Mode", },
    }
  },
});

const DrawerStack = createDrawerNavigator({
  screenOptions: {
    headerShown: false,
    drawerPosition: "right",
    drawerStyle: { width: 280, borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }
  },
  drawerContent: () => <DrawerContent />,
  screens: {
    "/": RootStack
  }
});

const Pages = createStaticNavigation(DrawerStack);

export default Pages;
